<template>
  <biz-form-remote-select
    :placeholder="placeholder"
    :remote-method="remoteMethod"
    :value="selectValue"
    cleared
    @input="updateSelectValue"
  >
    <div class="product-template-option" slot="option" slot-scope="{ option }">
      <h3>{{ option.name }}</h3>
      <div>
        <span class="product-template-option-text">
          <label>{{$t('common.label.serialNumber')}}：</label>
          <span>{{ option.serialNumber }}</span>
        </span>
        <span class="product-template-option-text">
          <label>{{$t('common.label.type')}}：</label>
          <span>{{ option.type }}</span>
        </span>
        <span class="product-template-option-text">
          <label>{{$t('common.base.customer')}}：</label>
          <span>{{ option.customerName || '' }}</span>
        </span>
      </div>
    </div>
  </biz-form-remote-select>
</template>

<script>
import { t } from '@src/locales';
export default {
  name: 'search-product-select',
  props: {
    placeholder: {
      type: String,
      default: t('common.placeholder.selectProduct')
    },
    remoteMethod: {
      type: Function
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectValue: this.value.slice()
    };
  },
  watch: {
    value(newValue) {
      this.selectValue = newValue.slice();
    }
  },
  methods: {
    updateSelectValue(value) {
      this.$emit('input', value);
    }
  }
};
</script>

<style lang="scss" scoped>
.product-template-option {
  font-size: 12px;
  line-height: 14px;
  padding: 10px 0;
  h3 {
    font-size: 14px;
  }

  &-text {
    display: block;
  }
  .product-template-option-text {
    line-height: 20px;
  }
}
</style>
